<template>
  <div class="custom_single_item">
    <a
      :href="item.url"
      target="_blank"
      v-for="(item, index) in item.data"
      :key="'singleItem_index_' + index"
      class="custom_single_item_link"
    >
      <img :src="item.image" v-lazy="item.image" />
      <div class="custom_single_item_link_content">
        <h1>{{ item.title }}</h1>
        <p>{{ item.desc }}</p>
      </div>
    </a>
  </div>
</template>
<script>
export default {
  name: "singleItem",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  mounted() {
    console.log(this.$props.item);
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.custom_single_item {
  width: 100%;
  text-align: left;
  .custom_single_item_link {
    display: block;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      min-height: (100 / @base);
      background-color: #999;
      overflow: hidden;
      border-top-left-radius: (5 / @base);
      border-top-right-radius: (5 / @base);
    }
    .custom_single_item_link_content {
      padding: 0 (10 / @base) (5 / @base) (10 / @base);
      h1 {
        font-size: (12 / @base);
        height: (25 / @base);
        line-height: (25 / @base);
        overflow: hidden;
      }
      p {
        font-size: (12 / @base);
        height: (34 / @base);
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
        width: 100%;
        display: block;
      }
    }
  }
}
</style>
